<template>
    <div class="container">
        <h2>软件介绍</h2>
        <div>
            一个自用的工具箱，基于 Electron + Vue 开发
        </div>
        <div>
            A Tool for YangShao
            An Electron application with Vue
        </div>
        <h2>功能模块</h2>
        <h3>
            首页（快捷键alt+0）
        </h3>
        <h3>
            Todo模块（快捷键alt+1）
        </h3>
        <div>
            - 添加待办 未完成背景为橙色，已完成背景为绿色，每次打开如果有未完成的自动加载到第一个未完成任务
        </div>
        <div>
            - 删除任务
        </div>
        <h3>
             阅读模块（快捷键alt+2）
        </h3>
        <div>
            - 离线阅读，加载本地小说文件，解析“第xxx章”格式，方向键上下滚动、左右切换章节，
        </div>
        <div>
            - 在线搜索，爬虫获取在线小说，解析“第xxx章”格式，方向键上下滚动、左右切换章节，点⭐加入书架，点垃圾桶删除。
        </div>
        <div>
            - 书架，显示已加入书架的小说，
        </div>
        <div>
            - 设置（阅读界面），设置字体大小，颜色，背景，边框。注意：选择颜色之后记得点“ok”！
            新增记忆模式，记录当前大小位置（适合摸鱼的大小位置），下次点击下方小飞机图标或者alt+/切换记忆模式。
        </div>
        <h3>
             取色器模块（快捷键alt+3）
        </h3>
        <div>
            - 取色器，获取屏幕上任意位置的RGB颜色值，自动复制HEX16进制格式到剪贴板，可以手动复制RGB格式。
        </div>
        <div>
            - 注意-- 取色器蒙版只会覆盖当前屏幕，如有多个扩展显示器，可以先将取色器窗口移动到指定显示器窗口再进行取色。
        </div>
        <h3>
             截图模块（快捷键alt+4）
        </h3>
        <div>
            - 截图，截取屏幕选定区域，可以二次调整区域，添加文字、线条，支持保存为png格式，支持保存为文件，支持拖拽保存到指定文件夹。
        </div>
        <div>
            - 注意-- 如有多个扩展显示器，自行选择“点击截图”和“屏幕2截图”来选择截图区域。
        </div>
        <h3>
             联机模块（快捷键alt+5）,服务器在另外项目
        </h3>
        <div>
            - chat，聊天室，通过websocket连接，输入内容发送，收到内容显示，
        </div>
        <div>
            - 井字棋，在线对战，通过websocket连接，
        </div>
        <div>
            - 五子棋，在线对战，通过websocket连接，
        </div>
        <h3>
             笔记模块（快捷键alt+6）
        </h3> 
        <div>
            - 笔记，读取本地安装目录下notes文件夹内的markdown格式笔记，自动解析目录。可以切换显示主题。
            （请自行创建notes文件夹，在里面创建markdown格式笔记文件，卸载时注意提前备份notes文件夹，以防误删）
        </div>
        <h3>
             音乐模块（快捷键alt+7）
        </h3> 
        <div>
            - 本地音乐播放器，先通过选择文件夹或单个文件添加歌单，然后打开播放器。可以展开列表切歌。
        </div>
        <h3>
             测量模块（快捷键alt+8）
        </h3> 
        <div>
            - 点击按钮选择本地图片打开，进入测量模式。
        </div>
        <div>
            - 修改画框大小或者缩放比例后按下enter键重新绘制图像。通过拖拽四条辅助线测量距离。重置按钮按图像原始尺寸绘制。右下角按钮点击进入退出全屏模式。
        </div>
        <h3>
             录屏模块（快捷键alt+9）
        </h3> 
        <div>
            - 点击获取窗口，获取当前活跃的可录制窗口
        </div>
        <div>
            - 选择要录制的窗口，点击开始录制进行录制，点击结束生成预览视频，点击保存下载到本地
        </div>
        <h3>
             翻译模块（快捷键ctrl+1）
        </h3> 
        <div>
            - 接入了百度翻译API，可以输入文本进行翻译。需要联网使用。
        </div>
        <h3>
             图识字模块（快捷键ctrl+2）
        </h3> 
        <div>
            - 上传图片识别文字。
        </div>
        <h2>快捷键</h2>
        <div>
            -<el-text class="mx-1" type="primary"> alt+0 </el-text>打开首页，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+. </el-text>老板键（切换显隐，.是小键盘的小数点 或者 '>/.'键）
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+1 </el-text>打开Todo模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+2 </el-text>打开阅读模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+3 </el-text>打开取色器模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+4 </el-text>打开截图模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+5 </el-text>打开在线模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+6 </el-text>打开笔记模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+7 </el-text>打开音乐模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+8 </el-text>打开测量模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> alt+9 </el-text>打开录屏模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> ctrl+1 </el-text>打开翻译模块，
        </div>
        <div>
            -<el-text class="mx-1" type="primary"> ctrl+2 </el-text>打开图识字模块，
        </div>
        <h2>联系我</h2>
        <div>
            Author: 杨少
        </div>
        <div>
            QQ: 714128596 （估计看不到，邮箱可能会弹窗）
        </div>
        <div>
            抖音：1753249422 （这个估计可以看到，我爱刷抖音）
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}
onMounted(() => {
    window.electron.ipcRenderer.send('showAbout')
})
</script>

<style lang="less" scoped>
.container {
    padding: 0 20px;
    color: #333;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    font-size: 16px;

    &::-webkit-scrollbar {
        height: 5px;
        width: 5px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #858585;
    }

    &::-webkit-scrollbar-track {
        border-radius: 5px;
        background: #f0f0f0;
    }
    h2{
        font-weight: 700;
        margin: 10px 0;
    }
    h3{
        font-weight: 600;
        margin: 5px 0;
        text-indent: 1em;
    }
    div{
        font-size: 17px;
        font-weight: 500;
        text-indent: 2em;
    }
}
</style>